<template>
  <div class="about">
    <div class="container">
      <h1>关于开发小工具</h1>
      
      <div class="content">
        <section class="section">
          <h2>项目简介</h2>
          <p>这是一个专为开发者设计的实用工具集合，旨在提高日常开发工作的效率。通过简单易用的界面，帮助开发者快速处理常见的开发任务。</p>
        </section>

        <section class="section">
          <h2>当前功能</h2>
          <div class="feature-list">
            <div class="feature-item">
              <h3>🔤 字符串处理工具</h3>
              <p>批量处理字符串，支持多种格式转换：</p>
              <ul>
                <li><strong>添加单引号和逗号：</strong> 适用于SQL查询中的IN语句</li>
                <li><strong>添加双引号和逗号：</strong> 适用于API接口参数</li>
                <li><strong>去除单引号：</strong> 清理SQL字符串中的单引号</li>
                <li><strong>去除双引号：</strong> 清理JSON字符串中的双引号</li>
                <li><strong>去除前后空格：</strong> 清理字符串两端的空白字符</li>
              </ul>
            </div>
          </div>
        </section>

        <section class="section">
          <h2>使用场景</h2>
          <div class="scenarios">
            <div class="scenario">
              <h4>SQL查询</h4>
              <p>将Excel中的ID列表转换为SQL IN查询语句</p>
              <code>SELECT * FROM users WHERE id IN ('1','2','3','4')</code>
            </div>
            <div class="scenario">
              <h4>API接口</h4>
              <p>将参数列表转换为API请求格式</p>
              <code>{"params": ["value1","value2","value3"]}</code>
            </div>
            <div class="scenario">
              <h4>数据清理</h4>
              <p>清理导入数据中的多余引号和空格</p>
            </div>
          </div>
        </section>

        <section class="section">
          <h2>技术栈</h2>
          <div class="tech-stack">
            <span class="tech-tag">Vue 3</span>
            <span class="tech-tag">TypeScript</span>
            <span class="tech-tag">Vite</span>
            <span class="tech-tag">Vue Router</span>
            <span class="tech-tag">Pinia</span>
          </div>
        </section>

        <section class="section">
          <h2>开发计划</h2>
          <ul class="roadmap">
            <li>JSON格式化工具</li>
            <li>Base64编码/解码</li>
            <li>时间戳转换</li>
            <li>正则表达式测试</li>
            <li>颜色值转换</li>
          </ul>
        </section>
      </div>
    </div>
  </div>
</template>

<style scoped>
.about {
  min-height: 100vh;
  background: #f8f9fa;
  padding: 40px 20px;
}

.container {
  max-width: 800px;
  margin: 0 auto;
}

h1 {
  color: #2c3e50;
  text-align: center;
  margin-bottom: 40px;
  font-size: 2.5rem;
}

.section {
  background: white;
  border-radius: 10px;
  padding: 30px;
  margin-bottom: 30px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.section h2 {
  color: #34495e;
  margin-bottom: 20px;
  border-bottom: 2px solid #3498db;
  padding-bottom: 10px;
}

.section h3 {
  color: #2c3e50;
  margin-bottom: 15px;
}

.section h4 {
  color: #34495e;
  margin-bottom: 10px;
}

.feature-item {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border-left: 4px solid #3498db;
}

.feature-item ul {
  margin-top: 15px;
  padding-left: 20px;
}

.feature-item li {
  margin-bottom: 8px;
  line-height: 1.6;
}

.scenarios {
  display: grid;
  gap: 20px;
}

.scenario {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.scenario code {
  display: block;
  background: #2c3e50;
  color: #ecf0f1;
  padding: 10px;
  border-radius: 4px;
  margin-top: 10px;
  font-family: 'Courier New', monospace;
  font-size: 14px;
}

.tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tech-tag {
  background: #3498db;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
}

.roadmap {
  list-style: none;
  padding: 0;
}

.roadmap li {
  padding: 10px 0;
  border-bottom: 1px solid #e9ecef;
  position: relative;
  padding-left: 25px;
}

.roadmap li:before {
  content: "🚀";
  position: absolute;
  left: 0;
}

.roadmap li:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }
  
  .section {
    padding: 20px;
  }
  
  .tech-stack {
    justify-content: center;
  }
}
</style>
